<template>
  <view class="collect-money-page">
    <view id="bind-chat-account-page">
      <view class="page-content">
        <view class="cur-qq-account">
          当前支付宝账号：<text class="text">{{ali_is_bind == 1?"已绑定":"未绑定"}}</text>
        </view>
        <view class="account-input">
          <input class="input" type="text" v-model="aliname" placeholder="请输入支付宝绑定的姓名"></input>
        </view>
        <view class="account-input">
          <input class="input" type="text" v-model="aliaccount" placeholder="请输入支付宝账号"></input>
        </view>
        <view class="">
          <view class="phone-group">
            <text class="phone-type" style="color: red;font-weight: bold">平台手机号：</text>
            <view class="phone-input">
              <input type="text" v-model="phone" disabled="true" placeholder="请输入手机号" />
            </view>
          </view>
          <view class="phone-group">
            <view class="code-input">
              <input type="text" v-model="phoneCode" placeholder="请输入手机验证码" />
            </view>
            <view class="send-code-btn" @tap="getPhoneCode">
              {{phoneCodeText}}<text v-if="phoneCodeText!=='发送验证码'">s</text>
            </view>
          </view>
        </view>
        <text style="color: red;font-weight: bold;margin-top: 32px;display: block;margin-left: 10px;">验证码每天只有五次机会，请勿随意发送</text>
      </view>
      <button v-if="type==1" class="sumbit-btn" type="default" :loading="loading" :disabled="loading" @click="banding()">提交</button>
    </view>

  </view>
</template>

<script>
import qiniuUploader from '../../components/qiniu/qiniuUploader.js';
import {apiBindPushUserInfo,apiSendSms, apiAlipayCode} from '../../../http/apis.js'
import {
  mapState
} from 'vuex'
export default {
  computed: {
    ...mapState(['token'])

  },
  data(){
    return {
      ali_is_bind: 0,
      loading: false,
      type: 1,
      // 支付名
      aliname: '',
      // 支付宝账号
      aliaccount: '',
      curname: '',
      phone: '',
      phoneCodeText: '发送验证码',
      phoneCode: '',
      validateCode: ''

    }
  },
  onLoad(option) {
    this.getUserBindInfo()
    // this.ali_is_bind = option.aliIsBind
    // if (this.ali_is_bind == 1) {
    //   this.aliname = option.aliname
    //   this.aliaccount = option.aliaccount
    // }
    // this.curname = option.aliname
    // this.pushId = option.pushId
    // this.getAliPayCodeInfo()
  },
  onShow() {

  },
  methods:{
    resetValidate() {
      this.validateCode = "";
    },
    getPhoneCode(){
      if(this.phoneCodeText!=='发送验证码'){
        return
      }
      apiSendSms({
        phone:this.phone,
        codeType:'bindAli',
        captcha: this.validateCode
      }).then(res =>{
        if(res.data.code == 1)  {
          this.$msg.showToast(res.data.msg)
          this.phoneCodeText = 60
          let timer=setInterval(()=>{
            this.phoneCodeText= this.phoneCodeText - 1
            if(this.phoneCodeText==0){
              this.phoneCodeText='发送验证码'
              clearInterval(timer)
            }
          },1000)
        } else {
          this.$msg.showToast(res.data.msg)
          this.resetValidate()
        }
      }).catch(res => {
        this.$msg.showToast(res.data.msg)
      })
    },
    getUserBindInfo(){
      // this.$isClick(true);
      apiBindPushUserInfo({
        token: this.token
      }).then(res =>{
        console.log(res)
        // this.$isClick(false);
        if(res.data.code == 1)  {
          this.ali_is_bind = res.data.msg.ali_is_bind
          if (this.ali_is_bind == 1) {
            this.aliname = res.data.msg.aliname
            this.aliaccount = res.data.msg.aliaccount
          }
          this.phone = res.data.msg.phone
        }
      }).catch(res => {
        // this.$msg.showToast(res.data.msg.bank_province)
        console.log(res)
      })
    },
    // 绑定支付宝
    banding(){
      if(!this.aliname){
        this.$msg.showToast('请输入支付宝绑定的姓名')
        return
      }
      else if(!this.aliaccount){
        this.$msg.showToast('请输入支付宝账号')
        return
      }
      else if(!this.phoneCode){
        this.$msg.showToast('请输入验证码')
      }

      uni.showLoading({
        title: '提交中',
        mask: true
      })
      this.loading = true
      // 调用数据
      apiAlipayCode({
        token:this.token,
        aliname: this.aliname,
        aliaccount: this.aliaccount,
        phoneCode: this.phoneCode,
        phone: this.phone,
        submitType: 2
      }).then(res =>{
        uni.hideLoading()
        if(res.data.code == 0)  {
          this.$msg.showToast('绑定成功')
          setTimeout(()=>{
            this.loading = false
            uni.switchTab({
              url:'../profile/a'
            })
          },500)
        } else{
          this.loading = false
          this.$msg.showToast(res.data.msg)
        }
      }).catch(res => {
        uni.hideLoading()
        this.loading = false
        this.$msg.showToast(res.data.msg)
      })

    }
  }

}
</script>

<style lang="scss">
page {
  background: #FFFFFF;
}
.phone-group {
  width: 84%;
  margin: 0 auto;
  display: flex;
  border: 1px solid #e0e0e0;
  align-items: center;
  border-radius: 10upx;
  //margin-bottom: 32upx;
  margin-top: 32upx;
}
.phone-type {
  display: inline-block;
  vertical-align: text-bottom;
  padding: 10upx 20upx;
  font-size: 28upx;
}
.phone-input {
  display: inline-block;
  padding: 20upx;
  border-left: 1px solid #e0e0e0;
  font-size: 28upx;
}
.code-input {
  padding: 20upx;
  flex: 1;
}
.send-code-btn {
  padding: 24upx 0;
  background: $theme-background-color;
  border-radius: 10upx;
  color: #FFFFFF;
  text-align: center;
  font-size: 28upx;
  width: 200upx;
}

#bind-chat-account-page{
  .page-content {
    background: #FFFFFF;
    padding: 100upx 0;
    .cur-qq-account{
      text-align: center;
      font-size: 30upx;
      font-family: PingFang-SC-Medium, PingFang-SC;
      font-weight: 500;
      color: #333333;
      line-height: 32upx;
      .text {
        color: $theme-color;
      }
    }
    .account-input {

      .input{
        border: 1px solid #e0e0e0;
        width: 80%;
        margin: 0 auto;
        height: 80upx;
        font-size: 30upx;
        padding: 0 16upx;
        border-radius: 10upx;
        margin-top: 32upx;
      }
    }
  }
  .sumbit-btn {
    margin: 32upx;
    height: 96upx;
    background: $theme-background-color;
    border-radius: 10upx;
    font-size: 32upx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
    line-height: 96upx;
  }
}

</style>




